<template>
    <!-- <div class="mainbox"> -->
    <!-- 添加社区 -->
        <div class="AddCommunity">
            <!-- 添加社区表头 -->
            <div class="AddCommunitytitle">
                <p @click="back">
                    <i class="el-icon-arrow-left"></i>
                    <span>社区添加</span>
                </p>
                <p>
                    <span class="must">*</span>
                    <span>为必填项</span>
                </p>
            </div>
            <!-- 添加社区输入框内容-->
            <div class="AddCommunitycontent">
                <div class="contentheader">
                    <p class="Basicinformation">
                        <span>基础信息</span>
                    </p>
                    <p class="Basicinformation">
                        <span>负责人</span>
                    </p>
                </div>
                <div class="addmodule">
                    <!-- 基础信息输入框 -->
                    <div class="countentleft">
                        <div class="basictable">
                            <p class="title">
                                <span>*</span>
                                社区名称：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="communityName"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span>*</span>
                                所在地区：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="communityarea"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span>*</span>
                                详细地址：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="detailedaddress"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span>*</span>
                                楼座数：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="Numberofbuildings"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span></span>
                                占地面积：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="coveranarea"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span></span>
                                建筑面积：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="buildingarea"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span></span>
                                公共场所面积：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="Publicarea"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span></span>
                                绿化面积：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="afforestedarea"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="communityimg">
                            <p class="title">
                                社区图片：
                            </p>
                            <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                    <!-- 负责人输入框 -->
                    <div class="countentright">
                        <div class="basictable">
                            <p class="title">
                                <span>*</span>
                                 负责人姓名：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="Nameofpersonincharge"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span>*</span>
                                 手机号码：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="phonenumber"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="basictable">
                            <p class="title">
                                <span></span>
                                 固定电话：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="fixedtelephone"
                            clearable class="communityName">
                            </el-input>
                        </div>
                        <div class="notesbox">
                            <p class="title">
                                <span></span>
                                备注:
                            </p>
                            <el-input
                            type="textarea"
                            placeholder="请输入备注信息"
                            v-model="textarea"
                            maxlength="300"
                            show-word-limit
                             class="notes">
                            </el-input>
                        </div>
                    </div>
                </div>
                <!-- 添加社区保存按钮 -->
                <div class="contentfooter">
                    <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
                    <el-button type="primary" class="createbutton" @click="ceate"><i class="el-icon-folder-add"></i>保存后继续创建</el-button>
                    <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
                </div>
            </div>
        <!-- </div> -->
    </div>
</template>

<script>
export default {
    data() {
      return {
        communityName: '',  //社区名称输入框(必填)
        communityarea:'',   //所在地区(必填)
        detailedaddress:'', //详细地址(必填)
        Numberofbuildings:'',//楼座数(必填)
        coveranarea:'',     //占地面积
        buildingarea:'',    //建筑面积
        Publicarea:'',      //公共场所面积
        afforestedarea:'',  //绿化面积
        Nameofpersonincharge:'',//负责人姓名(必填)
        phonenumber:'',     //手机号码(必填)
        fixedtelephone:'',  //固定电话
        imageUrl: '',      //上传社区照片
        textarea: ''        //备注信息多行文本输入框
      }
    },
    mounted(){
        if(this.$route.query.res1){
            this.communityName=this.$route.query.res1[0].name
            this.communityarea=this.$route.query.res1[0].area
            this.detailedaddress=this.$route.query.res1[0].detailedAddress
            this.Numberofbuildings=this.$route.query.res1[0].Numberofbuildings
            this.coveranarea=this.$route.query.res1[0].coveranarea
            this.buildingarea=this.$route.query.res1[0].buildingarea
            this.Publicarea=this.$route.query.res1[0].Publicarea
            this.afforestedarea=this.$route.query.res1[0].afforestedarea
            this.Nameofpersonincharge=this.$route.query.res1[0].chargeperson
            this.phonenumber=this.$route.query.res1[0].chargepersonphone
            this.fixedtelephone=this.$route.query.res1[0].fixedtelephone
            this.imageUrl=this.$route.query.res1[0].imageUrl
            this.textarea=this.$route.query.res1[0].textarea
        }
    },
    methods:{
        // 返回上一级
        back(){
            this.$router.go(-1)
        },
        // 上传社区照片事件
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 数据清空
        clearDate(){
            this.communityName=''
            this.communityarea=''
            this.detailedaddress=''
            this.Numberofbuildings=''
            this.coveranarea=''
            this.buildingarea=''
            this.Publicarea=''
            this.afforestedarea=''
            this.Nameofpersonincharge=''
            this.phonenumber=''
            this.fixedtelephone=''
            this.imageUrl=''
            this.textarea=''
        },
        // 添加社区底部保存 保存重建 重置按钮
        save(){
            // 如果必填项为空时，弹出弹窗提示必填项目不能为空，否则，将数据添加至社区管理数据库，并清空输入框内容，发出添加成功提示，页面返回上一级
            if(this.communityName=='' || this.communityarea=='' || this.detailedaddress=='' || this.Numberofbuildings=='' || this.Nameofpersonincharge=='' || this.phonenumber==''){
                this.$alert('*为必填项，输入内容不能为空', '', {
                    confirmButtonText: '确定',
                });
            }else{
                if(this.$route.query.res1){
                    console.log(this.$route.query.res1[0].name)
                    fetch(`http://127.0.0.1/communitychange?name=${this.communityName}&Numberofbuildings=${this.Numberofbuildings}&area=${this.communityarea}&detailedAddress=${this.detailedaddress}&chargeperson=${this.Nameofpersonincharge}&chargepersonphone=${this.phonenumber}&edit="编辑"&del="删除"&operte="楼宇管理"&coveranarea=${this.coveranarea}&buildingarea=${this.buildingarea}&Publicarea=${this.Publicarea}&afforestedarea=${this.afforestedarea}&fixedtelephone=${this.fixedtelephone}&imageUrl=${this.imageUrl}&textarea=${this.textarea}&date=${this.$route.query.res1[0].date}`).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据修改成功',
                            type: 'success'
                        });
                        this.$router.go(-1)  //页面数据返回上一级
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    fetch(`http://127.0.0.1/communityadd?name=${this.communityName}&Numberofbuildings=${this.Numberofbuildings}&area=${this.communityarea}&detailedAddress=${this.detailedaddress}&chargeperson=${this.Nameofpersonincharge}&chargepersonphone=${this.phonenumber}&edit="编辑"&del="删除"&operte="楼宇管理"&coveranarea=${this.coveranarea}&buildingarea=${this.buildingarea}&Publicarea=${this.Publicarea}&afforestedarea=${this.afforestedarea}&fixedtelephone=${this.fixedtelephone}&imageUrl=${this.imageUrl}&textarea=${this.textarea}`).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据添加成功',
                            type: 'success'
                        });
                        this.clearDate()
                        this.$router.go(-1)  //页面数据返回上一级
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }
        },
        ceate(){
            console.log("保存后继续创建")
            if(this.communityName=='' || this.communityarea=='' || this.detailedaddress=='' || this.Numberofbuildings=='' || this.Nameofpersonincharge=='' || this.phonenumber==''){
                this.$alert('*为必填项，输入内容不能为空', '', {
                    confirmButtonText: '确定',
                });
            }else{
                fetch(`http://127.0.0.1/communityadd?name=${this.communityName}&Numberofbuildings=${this.Numberofbuildings}&area=${this.communityarea}&detailedAddress=${this.detailedaddress}&chargeperson=${this.Nameofpersonincharge}&chargepersonphone=${this.phonenumber}&edit="编辑"&del="删除"&operte="楼宇管理"&coveranarea=${this.coveranarea}&buildingarea=${this.buildingarea}&Publicarea=${this.Publicarea}&afforestedarea=${this.afforestedarea}&fixedtelephone=${this.fixedtelephone}&imageUrl=${this.imageUrl}&textarea=${this.textarea}`).then(res=>res.json()).then(res1=>{
                    console.log(res1)
                    this.$message({
                        message: '数据添加成功',
                        type: 'success'
                    });
                    this.clearDate()
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        reseate(){
            console.log("重置")
            this.clearDate()
        }
    }
}
</script>

<style lang="scss" scoped>
    // 添加社区
    .AddCommunity{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加社区标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加社区内容
        .AddCommunitycontent{
            width: 1260px;
            // height: 700px;
            background-color: #fff;
            // 添加标题  头部标题
            .contentheader{
                width: 100%;
                box-sizing: border-box;
                height: 20px;
                padding: 0 50px;
                margin-top: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .Basicinformation{
                    width: 520px;
                    box-sizing: border-box;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #666666;
                    border-left: 4px solid rgba(0, 121, 254, 1);
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    span{
                        margin-left: 5px;
                    }
                }
            }
            // 添加社区   输入框内容
            .addmodule{
                width: 1260px;
                background-color: #fff;
                padding: 0 50px 50px;
                border-bottom: 1px solid rgb(242,242,242);
                display: flex;
                box-sizing: border-box;
                // align-items: center;
                justify-content: space-between;
                // 基础信息  和  负责人
                .countentleft,.countentright{
                    width: 520px;
                    margin-top: 40px;
                    .basictable{
                        width: 100%;
                        height: 40px;
                        margin-bottom: 25px;
                        display: flex;
                        align-items: center;
                        .title{
                            width: 120px;
                            height: 40px;
                            line-height: 40px;
                            font-size: 14px;
                            color: #666666;
                            text-align: center;
                            span{
                                width: 5px;
                                // height: 40px;
                                display: inline-block;
                                color: #FF3B30;
                            }
                        }
                        // 社区名称输入框
                        .communityName{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        
                        
                    }
                    // 上传社区照片内容
                    .communityimg{
                        width: 100%;
                        margin-bottom: 25px;
                        display: flex;
                        .title{
                            width: 120px;
                            height: 40px;
                            line-height: 40px;
                            font-size: 14px;
                            color: #666666;
                            text-align: center;
                            span{
                                width: 5px;
                                // height: 40px;
                                display: inline-block;
                                color: #FF3B30;
                            }
                        }
                        .avatar-uploader, .el-upload {
                            border: 1px dashed #d9d9d9 !important;
                            border-radius: 6px;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                        }
                        .avatar-uploader .el-upload:hover {
                            border-color: #409EFF;
                        }
                        .avatar-uploader-icon {
                            font-size: 28px;
                            color: #8c939d;
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            text-align: center;
                            background-color: #f9f9f9;
                        }
                        .avatar {
                            width: 100px;
                            height: 100px;
                            display: block;
                        }
                        
                    }
                    // 备注信息
                    .notesbox{
                        width: 100%;
                        margin-bottom: 25px;
                        display: flex;
                        .title{
                            width: 120px;
                            height: 40px;
                            line-height: 40px;
                            font-size: 14px;
                            color: #666666;
                            text-align: center;
                            span{
                                width: 5px;
                                // height: 40px;
                                display: inline-block;
                                color: #FF3B30;
                            }
                        }
                        .notes {
                            width: 400px !important;
                            height: 160px;
                            ::v-deep .el-textarea__inner{
                                height: 160px !important;
                                resize: none;
                            }
                            ::v-deep .el-textarea__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                    }
                }
            }
            // 添加社区底部按钮
            .contentfooter{
                width: 100%;
                box-sizing: border-box;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                .savebutton,.reseatebutton{
                    width: 140px;
                    height: 40px;
                    i{
                        margin-right: 5px;
                    }
                }
                .createbutton{
                    width: 160px;
                    height: 40px;
                    i{
                        margin-right: 5px;
                    }
                }
                .el-button--primary{
                    background-color: rgba(0, 121, 254, 1);
                }
                .el-button--primary:hover {
                    background: #3394fe !important;
                    border-color: #3394fe !important;
                    color: #FFF !important;
                }
                .el-button.is-plain{
                    border-color: rgba(0, 121, 254, 1);
                    color: rgba(0, 121, 254, 1);
                }
                .el-button.is-plain:hover {
                    background: #FFF !important;
                    border-color: #409EFF;
                    color: #409EFF !important;
                }
            }
        }
    }
</style>